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Abstract — The purpose of this paper is to introduce an interactive 
online case-study library website developed in a national project. The 
design goal of the website is to provide interactive, enhanced, case- 
based and online educational resource for educators through the 
purpose and within the scope of a national project. The ADDIE 
instructional design model was used in the development of the 
website for interactive case-based library. This library is developed 
on a web-based platform, which is important in terms of 
manageability, accessibility, and updateability of data. Users are able 
to sort the displayed case-studies by their titles, dates, ratings, view 
counts, etc. The usability test is used and the expert opinion is taken 
for the evaluation of the website. This website is a tool to integrate 
technology into education. It is believed that this website will be 
beneficial for pre-service and in-service teachers in terms of their 
professional developments. 

Keywords — ADDIE, Case-based library, Design, Technology 
Integration. 

I. Introduction 

I NSTRUCTION is a systematic process in which every 
element (i.e. teachers, students, materials, and learning 
environment) is very important to successful learning [5]. In 
the area of instructional technology, instructional design 
serves as a crucial process that guides the planning and 
development of effective learning environments [13]. 
Instructional design that implements sequence of instructions 
for developing educational programs or instructional materials 
[8]. According to Smith and Ragan [20] defined as 
instructional design is - a systematic and reflective process to 
insert optimized instructional principles into different learning 
resources like materials, activities and evaluation process. An 
instructional design model should show what many different 
aspects of the instruction process are to be like in order to 
achieve the desired outcomes under the expected conditions 
[14]. The characteristics of instructional models are that they 
are (a) learner-centered, (b) goal- oriented, (c) focused on real 
world, (d) measured in a reliable and valid way, (e) empirical, 
and (f) require team effort [8]. The instructional design 


principles constitute a systematic method that helps educators 
design learning activities consistent with learning objectives 
and evaluate learning outcomes. 

Many up-to-date models have been developed on 
instructional design. There are more than 100 different 
variations of instructional design models (Dick and Carey, 
Kemp, Taylor, Smith and Ragan, etc.); however, almost all of 
them reflect the generic “ADDIE” process [2]. ADDIE is a 
well-known and most popular instructional design framework 
which is also base for most of the instructional design models 
[10]. The main goal of ADDIE is to increase the effectiveness 
and efficiency of education and training as well as eliminating 
peripheral knowledge from courses while ensuring that 
students acquire the necessary knowledge and expertise to do 
the job [2]. ADDIE model is integrated into instructional 
system throughout all phases of the process — analysis, design, 
development, and implementation, with the evaluation 
activities integrated into each phase of the process (Fig. 1). 



Fig. 1 The phases of ADDIE model 


The ADDIE process is a series of procedures which 
addresses decisions about exactly what, where, how, and when 
to teach the skills, knowledge, and attitudes needed to perform 
every task selected for instruction [2]. Moreover, it provides a 
step by step process that helps instructors to plan and create 
training programs with a framework in order to make sure that 
their instructional results are effective and that their processes 
are as efficient [19]. 

The first phase which is called analysis involves analysis of 
the learner characteristics and needs, defining educational 
goals and objectives, deciding the material that must taught 
and recognizing learner’s previous knowledge [18]. Designing 
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of the lesson begins with the determination of the lesson 
objectives and follows with the decision on the right strategies 
to perform these objectives [3]. The decisions taken in the 
analysis process is the basis of all other phases. 

The design phase of ADDIE involves answering some 
important questions about how students will learn, how they 
will demonstrate what they have learned and how the learning 
will occur [7]. Therefore, in this phase, instructional 
developer s/instructors write objectives in measurable terms 
[5]— [20], select instructional material and media, determine 
instructional strategies [2], and specify instructional content, 
resources and process [7]. In the design part, instructional 
designers also determine assessment methodology [6]. After 
the completion of the design phase, development phase 
begins. 

During the development phase, results from the analysis and 
design phases are used to developed instructional materials 
and activities. In other words, the development is a production 
phase of ADDIE instructional design model. In this phase, the 
instructional designer is concerned with the most appropriate 
medium for instruction such as how the visual design of the 
instructional materials can support and facilitate learning; and 
whether the materials are ’’usable” or whether they actually get 
in the way of learning [8]. 

In the implementation phase, the analysis, design and 
development phases come together and learners gain 
important knowledge and skills as a result of instruction [14]. 
This phase deals with the actual delivery of instruction and the 
achievement of the course objectives [7]. 

The last phase of the model is evaluation , which is not 
generally part of the instructional design process. Evaluation 
involves formative and summative evaluation which often 
appears in various phases of the model. Instructional designers 
test the instructional materials to determine what kind of 
changes and revisions need to be made in them. Formative 
evaluation involves identifying needed revisions to the 
instruction; summative evaluation involves assessing the 
overall worth of the instruction, in either absolute or relative 
terms [8]. Evaluation provides a feedback in order to back the 
necessarily phases of the model. 

A case which is called a story described with situations, 
problems, knowledge and skills to be used also helps to 
transfer learning to various job settings [11]. Case is a method 
that the pre-service teachers confronted with problems are 
likely to be faced in real classroom settings and prepares them 
for life [15]. The benefits of cased based learning are 
facilitating critical thinking, deep analysis, problem solving 
and meaningful learning [17]. 

The purpose of this paper is to introduce an interactive 
online case-study library website developed in a national 
project. The design goal of the website is to provide 
interactive, enhanced, case-based and online educational 
resource for educators through the purpose and within the 
scope of a national project. The ADDIE instructional design 
model is used in the development of the website of an 
interactive case-based library. The reason why the ADDIE 
instruction design model was chosen in this study is that it is a 


model that can be valid for all kinds of instruction and at the 
same time application of the ADDIE process has improved the 
quality of instruction in consistent manner [2]. 

II. Methodology 

A. Participants 

Participants were 91 pre-service teachers at the Computer 
and Instructional Technology Education Program in the 
Faculty of Education. 

B. Research Instruments 

In this study, usability test, originally developed by Cagiltay 
[4], was used to examine the usability of the website. This 
research is a pilot study that was designed for usability of the 
web page. 

C. Data Analysis 

The data from this study were analyzed using SPSS 20 
(Statistical Package for Social Sciences) software. Descriptive 
statistics were used to analyze the data. For this, the average, 
standard deviation, and reliability have been examined. 

III. Findings 

A. Design and Evaluation 

The ADDIE instructional design model was used in the 
development of the website of interactive online case-study 
library. The five core elements are: Analyze, Design, Develop, 
Implement, and Evaluate (ADDIE) [1]— [21]. Fig. 1 shows that 
the development of web sites according to ADDIE 
instructional model phases. ADDIE instructional model 
contains other instructional models’ components [9]— [12] and 
most instructional models are developed based on ADDIE 
model [16]. As seen in Fig. 1, each of the core elements of 
ADDIE (analyze, design, develop, implement and evaluate) 
informs the other as development takes place and revision 
continues through the process at least until the instruction is 
implemented [8]. This situation saves time and cost. In this 
project, the assessment of the website is conducted in terms of 
user feedback and online error reports during the 
implementation of the website through the circular framework 
of ADDIE model. After the errors are analyzed, the web site is 
improved and developed. The development phases of websites 
are given below according to the ADDIE instructional model. 

Analysis: Design goal of the website is to provide 
interactive, enhanced, case-based and online an educational 
resource for educators through the purpose and within the 
scope of the project. 

The following objectives were implemented within the 
scope of this website: 

• Informing website users about projects’ aims and 
achievements 

• Explaining the scope of the project by giving information 
about case-based method and TPACK (Technology, 
Pedagogy and Content Knowledge) 

• Enabling users to submit digital observations via a 
membership system 
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• Giving opportunities to users for reviewing and editing 
their observations 

• Ensuring that observations sent by project implementers 
(the website administrator) are shown via a control panel 
and broadcast, after being turned into case study format, 
again via the control panel on case study library with 
appropriate labels and explanations 

• Giving opportunities to users for voting and making 
comments on published case studies 

• Allow reviewing, approving / deleting / editing operations 
by site managers via control panel 

• Presenting quick (with keywords) and advanced (content, 
author, tags, area, location etc. selective) search features 
for case-based learning 

• Giving opportunities to users to list search results of case 
studies according to specific criteria (title, score of voting, 
count of read, date added) 

• Placement of “Report an error” link and the form under 
the case studies because of the inclusion of users in the 
feedback process 

• Presenting a communication form under the “Contact Us” 
menu to take websites users’ opinions and suggestions 
about the project and the website 

The target groups of the website comprises of pre-service 
teachers and in-service teachers who are using the FATIH 
Project applications in education and instruction. At this 
phase, design tasks and success criteria were listed in terms of 
the current knowledge, characteristics and learning 
competencies of the target groups. Based on the expert views, 
the tasks were identified, the revisions were made, and the 
website was developed in the project work-time schedule. 

Design: At this phase, educational, visual and technical 
design strategies were used in terms of objectives and tasks 
determined. The suitable strategies and methods were decided 
for the target groups. User interface of the website was 
designed using these determined strategies and methods. Also, 
how the content format and layout would be presented to the 
users was decided. 

Experts’ views were taken throughout the designing of the 
interface phase. In designing of the interface phase, the 
graphical interface of the website was planned in detail and 
reported with a storyboard. The first storyboard study revealed 
the basic appearance of the website (Fig. 2). 

Formation of a draft website map before the system is 
prepared is of great important in the process of system design 
and planning. Moreover, a website map application was 
prepared that showed the menu components needed for the 
website, and the connection between the pages, which 
revealed the hierarchical structure of the website (Fig. 3). 

After the stages of creating a draft and a menu hierarchy, a 
storyboard belonging to the homepage was formed (Fig. 4). 



Fig. 2 The first template for the website 
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Fig. 3 The hierarchical framework of the website 



Fig. 4 The homepage storyboard of the web site 
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At this phase, the architecture of the website programming, 
web design, programming technologies and tools were 
determined. Moreover, it was important to fulfil this phase 
comprehensively and meticulously because all the coding and 
technical development steps of the web site depend on the 
storyboards and user interface report. 

Development: In this phase, preparation of the design of 
the graphic user interface and storyboards was implemented 
by the web designer and the web programmer using 
technological tools and strategies as a visual/software. While 
the web designer integrated the graphic interface into web 
technologies by using the templates and prototypes in the 
design stage, web programmer created the web components 
that organized and managed the content of the web page, 
which would be compatible with this interface, and that would 
enable the fulfillment of project tasks. Web designer and web 
programmer worked harmoniously and cooperated at certain 
points to develop visual and dynamic structures by 
considering the dynamics and interaction framework of the 
website, which made the process faster and easier. During the 
developmental stage, as components were completed, 
debugging procedures were implemented by testers and thus 
feedback was provided. In addition, the developmental process 
was continually revised by taking expert views. 

Implementation: In this phase, all of the codes, graphics, 
media, and the database files of the websites were transferred 
to web hosting server and the necessary adjustments were 
made as functional. In the implementation phase, by using an 
error report system and web analysis tools, user activities were 
tracked on the web site. Thus, the website was checked 
through the objectives which had been determined before. In 
this phase, if an error or deficiency was identified through the 
ADDIE cyclical process- turn back to the design phase if it is 
necessary- an update for the codes and contents of website 
was provided. At this stage, a few cases studies were entered 
by the project team into the web site to see if the web site 
worked smoothly or not and it was observed that the web site 
worked properly. 

Evaluation: An evaluation was performed both in the 
design process and at the end of the design. The formative 
evaluation appeared in all phases of the web site development. 
Thus, it was checked that the website attained success criteria 
which had been determined in the analysis phase. The 
development phase of the website was used to enter pre- 
service teachers’ observations. The formative evaluation is 
considered in this process. Similarly, a summative evaluation 
was conducted and the user opinions about design and project 
outcomes were taken. A product that was developed by 
students selected from a department was used and their views 
about their user experiences were collected and analyzed. As a 
result of the analysis, the realization levels of the design and 
the project objectives were stated. 

Expert view was taken during the evaluation stage of the 
web site and the following corrections were made in 
accordance with these views. 

• During the process of determining the stylistic 
characteristics of the web site, initially, the dominant 


colors of the web site were chosen to be blue, red and 
grey. However, it was decided, in line with the expert 
view, that it would be more appropriate to select colors 
that would match the university’s colors and would not 
tire eyes, which meant the selection of turquoise, grey and 
white. 

• A section called “News” was not added while the website 
map, which would reveal the hierarchy in the web site 
was being prepared. However, a news module was created 
thinking that a module that would allow the web site 
administration to contact users might be needed in the 
course of time. 

• In the section where the copyrights of the web site were 
mentioned, it was initially planned that a written article, 
the university’s logo and the sponsor’s logo (TUBiTAK) 
would be included. However, this section was removed on 
the grounds that it occupied too much space and as a 
result a small section stating the copyrights was created. 

• During the initial coding of the web site, it was checked 
continually by W3C Validator to ensure that stylistic 
features were in conformity with the international 
standards, (http://validator.w3 .org/) 

• Considering that inclusion of the section that rated the 
comments about case studies was unnecessary, it was 
removed. 

• It was decided that Ajax technology be used in the case 
study page so that one would not have to go back to the 
beginning of the page each time a comment was added. 
Thus, instant data recording became possible. 

• Using the paging system in the pages where sections and 
case studies were listed, the web site was prevented from 
being too long. 

• Users were informed about what purpose the form 
components in the web site served by including a section 
which explained this. 

The usability test was used to evaluate the usability of the 

web site which was designed based on the expert reviews. The 

mean scores about the usability of the web site that was 

prepared are given in Table I. 


TABLE I 

The Descriptive Analysis Results of The Usability Test Items 


Test Items 

n 

X 

SD 

1 . 1 think I will often use this system. 

91 

2.94 

.94 

2. 1 found the system unnecesarily complex. 

91 

3.49 

.95 

3. 1 thought the system was easy to use. 

91 

3.61 

1.04 

4. 1 think I need technical assistance from someone 

Q1 

o or 

i no 

in order to be able to use this system. 




5. 1 found several functions of the system well- 
integrated. 

91 

2.98 

1.00 

6. 1 thought there were too many inconsistencies in 

91 

3.48 

1.04 

the system. 



7. 1 think many people can use this system fast. 

91 

3.3S 

.92 

8. 1 found the use of the system extremely clumsy. 

91 

3.51 

1.03 

9. 1 was self-confident while I was using the system. 

91 

3.62 

.85 

10. 1 had to learn many things before I entered the 

91 

3.94 

.95 

system. 




International Scholarly and Scientific Research & Innovation 8(8) 2014 


1256 



International Science Index Vol:8, No:8, 2014 waset.org/Publication/9999087 


World Academy of Science, Engineering and Technology 
International Journal of Computer, Information, Systems and Control Engineering Vol:8 No:8, 2014 


Histogram 



Fig. 5 The histogram diagram for the normal distribution of the items 
in the usability test 

It was observed that the items with the highest scores in 
terms of usability were 10, 4, 9 and 3 respectively whereas 
those with the lowest scores were 1, 5, 7 and 2. When Fig. 5 is 
examined, it is seen that the distribution of the items in the 
usability test was slightly skewed towards the left (skewness - 
.190). It can be said that if it is within the limits of the 
coefficient of skewness (+1, -1), it does not exhibit a 
significant deviation from the normal distribution of scores. 
Therefore, this distribution can be considered normal. For the 
reliability of the scales, Cronbach’s alpha coefficient was 
used. Cronbach alpha coefficients were found to be .75 for the 
usability scale. These results indicated that the acceptable 
level of reliability was evident for the usability scale. 

IV. Conclusions 

The purpose of this paper is to introduce an interactive 
online case-study library website developed in a national 
project. Within the scope of this project, an educational, 
interactive and case-based project was developed in order to 
create a source that teachers and students can resort to 
regarding problems and cases that they may experience in real 
classroom conditions. Moreover, the ADDIE instructional 
design model was taken as a basis during the preparation of 
this web site and the web site in question was prepared in 
accordance with the stages of this model. After the web site 
was designed, a pilot version was administered to 91 pre- 
service teachers. At this stage, the usability test was 
administered to the pre-service teachers. As a result of the 
analysis, it was seen that the pre-service teachers found the 
web site usable. Moreover, it was seen that the mean scores of 
items such as I think I will often use this system, I found the 
system unnecesarily complex, I found several functions of the 
system well- integrated, I think many people can use this 
system fastwere higher than the other items. On the other 


hand, the mean scores of items such as I thought the system 
was easy to use, I think I need technical assistance from 
someone in order to be able to use this system, I was self- 
confident while I was using the system, I had to learn many 
things before I entered the system were lower than the other 
items. As a result of the responses obtained from the students, 
it was understood that the students found the web site complex 
and therefore it was decided that we return to the design stage 
of the ADDIE model, make the web site simpler and remove 
unnecessary components. In conclusion, it was seen that the 
students’ attitudes towards the usability of the web site were 
positive. It is believed that this website will be beneficial for 
pre-service and in-service teachers in terms of their 
professional developments. 
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